<template>
	<view class="content">
		<view class="title">
			<view class="back">
				<uni-icons type="arrow-left" size="30" color="white" @click="back()"></uni-icons>
			</view>
			<view class="list">
				<uni-icons type="images" size="30" color="white" @click="toImgList()"></uni-icons>
			</view>
			<view class="viewTitle">
				<text>
					与我一起，探索心中的世界吧~
				</text>
			</view>
		</view>
		<view class="btn">
			<button v-if="isShow" @click="getSdImg()">点击生成心情图片</button>
		</view>
		<view class="img-cav">
			<view class="message">
				<uni-section :title="title" type="line" padding>
					<uni-steps :options="list" active-color="#007AFF" :active="active" direction="column" />
				</uni-section>
			</view>
			<view class="btm-Img">
				<image :src="src"></image>
			</view>
			<view class="desc">
				<text>
					{{desc}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getImg,generationImg,addSdImg} from '@/api/sd-img.js';
	import {threeJournal} from '@/api/journal.js';
	export default {
		data() {
			return {
				base6422:"",
				title:"将筛选您的前三篇日记",
				src:"",
				desc:"愿你永攀高峰，在未来的日子里，不断向前",
				id:"",
				isShow:true,
				token:"",
				active:3,
				data:[],
				imgUrl:"",
				list:[
					{
						title: '宁静的午后',
						
					}, 
					{
						title: '失落的一角',
						
					}, 
					{
						title: '夕阳下的思考',
						
					}
				]
			}
		},
		onLoad() {
			this.getMessage()
			this.getJournalData()
			// this.sdImg()
			
		},
		methods: {
			//去图片列表
			toImgList(){
				uni.navigateTo({
					url:"/pages/me/imgList"
				})
			},
			//添加进数据库
			addToDataBase(){
				console.log("添加图片地址"+this.imgUrl)
				addSdImg({
					prompt:this.data.toString(),
					imgUrl:this.imgUrl,
					desc:this.desc,
					authorId:this.id,
					token:this.token
				}).then(res=>{
					console.log(res)
				})
				
			},
			//获取用户的日记数据
			getJournalData(){
				threeJournal({
					authorId:this.id,
					token:this.token
				}).then(res=>{
					this.list = res.data.data.list
					this.data = res.data.data.data
					if(this.list==null){
						this.title = "请至少写一篇日记再来哦"
						this.isShow = false
					}
				})
			},
			//返回页面
			back(){
				uni.navigateTo({
					url:"/pages/me/me"
				})
			},
			getMessage(){
				this.id=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			//测试图片获取
			async sdImg(){
				
				await getImg({
					token:this.token
				}).then(res=>{
					this.base6422 = res.data
					this.formatBase64(this.base6422)
					this.upload()
					
				})
			},
			//测试图片获取
			async getSdImg(){
				uni.showLoading({
					title: '图片生成中，可能需要的时间有点长',
					mask:true
				});
				await generationImg({
					prompt:this.data.toString(),
					token:this.token,
					authorId:this.id
				}).then(res=>{
					console.log(res)
					if(res.data.data.desc=="401"){
						this.desc = "今天已经生成过了，明天再来吧"
					}else{
						this.base6422=res.data.data.base64
						this.desc = res.data.data.desc
						this.formatBase64(this.base6422)
						this.upload()
						
						
					}
					uni.hideLoading()
					
				})
			},
			// 上传图片
			async upload(){
				const res = uniCloud.uploadFile({
					filePath:this.src,
					cloudPathAsRealPath:true,
					cloudPath:"sd/titleImg/"+Date.now()+".png"
					
				}).then(res=>{
					if(res.success){
						this.imgUrl=res.fileID
						console.log("图片地址："+this.imgUrl)
						this.addToDataBase()
					}
					
				})
			},
			// base64转换url
			formatBase64(base64Str){
				// 将base64字符串转换为ArrayBuffer格式
				const arrayBuffer = uni.base64ToArrayBuffer(base64Str);
				
				// 将ArrayBuffer转换为Blob对象
				const blob = new Blob([arrayBuffer], { type: 'image/png' });
				
				// 创建Blob URL
				const imgUrl = URL.createObjectURL(blob);
				console.log(imgUrl)
				// 在页面上显示图片
				this.src = imgUrl;
				return imgUrl
			}
		}
	}
</script >

<style lang="scss">
page{
	background-color: $bg-blue;
}
.content {
  height: 100vh;
  padding: 30rpx;
  text-align: center;
  .title {
	height: 30vh;
	.back{
		position: absolute;
		top: 3;
		left: 3;
	}
	.list{
		position: absolute;
		right:0;
		top:3;
	}
	.viewTitle {
		padding-top: 20vh;
		font-size: 49rpx;
		color: white;
		
	}
  }
  .btn {
		margin-bottom: 10%;
		button {
			width: 50%;
			font-size: 35rpx;
			margin-top: 10%;
			border: none;
			background-color: #007bff;
			color: white;
			border-radius: 10rpx;
		}
		button:active{
			opacity: 0.7;
		}
	
  }
  .img-cav {
	// background-color: $bg-gary;
    width: 100%;
	height: 50vh;
	text-align: center;
	border-radius: 15rpx;
	.message{
		
		
	}
	.btm-Img{
		margin-top: 5%;
		image {
			
			border-radius: 20rpx;
		}
	}
	.desc{
		color: white;
		padding: 30rpx;
		
	}
	
  }

}
</style>
